<template>
  <div class="page_box">
    <div class="tips">
      左侧盒子、右侧盒子 可以通过 边(红色)拉伸或者按钮来触发
    </div>
    <div class="test_box">
      <div class="left" :style="{ width: `${leftWidth}px` }">
        <el-button :v-show="leftFlag" @click="expandEvent(leftFlag, 'left')">
          {{ leftFlag ? "打开" : "缩小" }}
        </el-button>
        <!-- xHandle 的作用是 可以拉动边框 进行伸缩 -->
        <XHandle
          @widthChange="leftWidthChange"
          :position="{ top: 0, right: 0 }"
        />
      </div>
      <div class="middle"></div>
      <div class="right" :style="{ width: `${rightWidth}px` }">
        <el-button :v-show="rightFlag" @click="expandEvent(rightFlag, 'right')">
          {{ rightFlag ? "打开" : "缩小" }}
        </el-button>
        <!-- xHandle 的作用是 可以拉动边框 进行伸缩 -->
        <XHandle @widthChange="rightWidthChange" />
      </div>
    </div>
  </div>
</template>

<script>
import XHandle from "./component/XHandle";
export default {
  name: "scalingBox",
  components: {
    XHandle,
  },
  data() {
    return {
      leftWidth: 400,
      leftFlag: false,
      rightWidth: 400,
      rightFlag: false,
    };
  },
  methods: {
    // 左侧伸缩按钮
    leftWidthChange(movement) {
      this.leftWidth -= movement;
      // 宽度到小于100 时 自动关闭
      if (this.leftWidth < 100) {
        this.leftWidth = 50;
        this.expandEvent(false);
      }
      // 限制最大宽度
      if (this.leftWidth > 700) {
        this.leftWidth = 700;
      }
    },
    // 右侧伸缩按钮
    rightWidthChange(movement) {
      this.rightWidth += movement;
      // 宽度到小于100 时 自动关闭
      if (this.rightWidth < 100) {
        this.rightWidth = 50;
        this.expandEvent(false);
      }
      // 限制最大宽度
      if (this.rightWidth > 700) {
        this.rightWidth = 700;
      }
    },
    // 展开/关闭
    expandEvent(v, type) {
      if (type === "left") {
        this.leftFlag = !v;
        // 默认宽度为400 建议和css 保持一致
        this.leftWidth = v ? 400 : 0;
      } else {
        this.rightFlag = !v;
        // 默认宽度为400 建议和css 保持一致
        this.rightWidth = v ? 400 : 0;
      }
    },
  },
};
</script>
<style lang="scss" scoped>
.tips {
  text-align: center;
  margin-bottom: 20px;
}
.test_box {
  width: 100%;
  height: 100%;
  display: flex;
  .left,
  .middle,
  .right {
    height: 500px;
    border: 1px solid #000;
    // transition: all 0.1s;
  }
  .left {
    // 子组件用了 absolute
    position: relative;
    border-right: 1px solid red;
  }
  .middle {
    flex: 1;
    margin: 0 20px;
  }
  .right {
    position: relative;
    width: 200px;
  }
}
</style>
